JS实现多张图片链接打包成压缩包

大晒啦

已于 2023-11-30 10:55:22 修改

阅读量1.5k

点赞数 1

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2021-12-30 11:28:52 首次发布

本文链接：https://blog.csdn.net/weixin_43019353/article/details/122232440

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用JavaScript结合JSZip和axios库来批量下载图片，并将它们压缩成ZIP文件供用户下载。点击按钮后，会触发下载过程，将指定的图片URL列表整合到一个ZIP文件中，文件名显示为'images'。

摘要由CSDN通过智能技术生成

<button id="download">下载</button>
<div>正在下载 <span id="download-name"></span></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  function downloadFile(url, name) {
    let a = document.createElement("a");
    a.href = url;
    a.download = name;
    a.click();
  }

  download.onclick = async function () {
    // 图片链接
    var imgs = [
      "https://img30.360buyimg.com/sku/jfs/t1/207137/8/14365/117601/61caed77E302ec5e6/fc176425c0fc9890.jpg",
      "https://img30.360buyimg.com/sku/jfs/t1/220320/17/9185/269476/61cb2178Ee15cea30/d595ce4e8ffce989.jpg",
      "https://img30.360buyimg.com/sku/jfs/t1/115954/9/26892/145041/61cb2178E3daea4dd/a9ee4915c4b713d8.jpg",
      "https://img30.360buyimg.com/sku/jfs/t1/173342/15/25449/105560/61cb2178E1cb556bb/2c00120d486da6e6.jpg",
      "https://img30.360buyimg.com/sku/jfs/t1/141692/40/25167/174706/61cb2178Ee0bffb65/17ef5193de9fb646.jpg",
      "https://img30.360buyimg.com/sku/jfs/t1/205586/30/20383/240378/61cb2178E8c8f1151/dfdd91962657b494.jpg",
      "https://img30.360buyimg.com/sku/jfs/t1/217308/20/9366/112617/61cb2178E13f4728d/e53301a85b396690.jpg",
      "https://img30.360buyimg.com/sku/jfs/t1/113727/10/25907/230547/61cb2178E073efa66/5284dc536abeec34.jpg",
      "https://img30.360buyimg.com/sku/jfs/t1/213798/13/9434/98711/61cb2178E3a3bf8b4/1ce14f477fd1778c.jpg",
      "https://img30.360buyimg.com/sku/jfs/t1/144776/2/20883/104830/61cb2178Ebcffd5be/48748e9463601116.jpg",
    ];
    var zip = new JSZip();
    for (let url of imgs) {
      let fileName = url.split("/").pop();
      let { data } = await axios({
        method: "get",
        url,
        responseType: "blob",
      });
      window["download-name"].innerText = fileName;
      zip.file(fileName, data);
    }
    zip.generateAsync({ type: "blob" }).then(function (content) {
      let url = window.URL.createObjectURL(content);
      downloadFile(url, "images");
    });
  };
</script>